<template>
  <div class="flex-row flex-deviceinfo" >
    <validator name='n' @valid="mValid(true)"  @invalid="mValid(false)">
      <avatar-upload :img-src.sync="row.img.content" :filename.sync="row.img.filename "></avatar-upload>
      <form class="form-horizontal" style="flex: 1;">
        <div class="form-group auto"  style="margin-top: 10px;margin-left: 10px;">
          <div class="col-sm-6" :class="[$n.devicetype.required ? 'select-error' : '']" style="padding-right: 5px;" id='userfiles-useDevInf-设备类型'>
            <input type="text" v-show="false" v-model="$refs.devicetype.selectedItems" v-validate:devicetype='{required: true }'>
            <v-select :value.sync="row.f_devices_type" v-model="row.f_devices_type"
                :options='devicetypes' placeholder='设备类型'
                close-on-select v-ref:devicetype></v-select>
          </div>
          <div class="col-sm-6" style="padding-right: 5px;">
            <input type="text" class="form-control" v-model="row.f_devices_no" placeholder='设备编号' v-next-el="{id: $index+'brand'}" >
          </div>
        </div>
        <div class="form-group auto"  style="margin-left: 10px;">
          <div class="col-sm-6" style="padding-right: 5px;">
            <input type="text" class="form-control" v-model="row.f_brand" placeholder='设备品牌' v-next-el="{id: $index+'devicesmodel'}"   :id="$index+'brand'">
          </div>
          <div class="col-sm-6" style="padding-right: 5px;">
            <input type="text" class="form-control" v-model="row.f_devices_model" placeholder='设备型号'  :id="$index+'devicesmodel'">
          </div>
        </div>
      </form>
      <img :src="imgdelete" alt="图片加载失败" class="img-responsive" style="width: 30px;height: 30px;margin-top: 30px;"
      @click="$dispatch('delete-device')" v-if="row.f_devices_state !== '有效'">
     </validator>
    </div>
</template>

<script>
import AppData from '../../stores/AppData'

export default {
  title: '表具信息',
  data () {
    return {
      row: this.device,
      imgdelete: '/images/mainicon/deletedevice.png',
      imgadd: '/images/mainicon/adddevice.png'
    }
  },
  props: ['device', 'valid'],
  ready () {
    this.row = Object.assign(this.row, this.device, {})
    this.row.valid = false
  },
  methods: {

    mValid (bool) {
      this.row.valid = bool
      this.$dispatch('self-valid')
    }
  },
  watch: {
    'device' () {
      this.row = Object.assign(this.row, this.meter, {})
      this.row.valid = false
    }
  },
  computed: {
    devicetypes () {
      return AppData.getParam('设备类型')
    }
  }
}
</script>
